class Banner {
    constructor(ops={}) {
        this.box = ops.box;
        this.imgs = ops.imgs;
        this.btns = ops.btns === undefined ? true : ops.btns;
        this.list = ops.list === undefined ? true : ops.list;
        this.autoPlay = ops.autoPlay === undefined ? true : ops.autoPlay;
        this.index = ops.index || 0;
        this.delayTime = ops.delayTime || 2000;

        this.prev = null;

        this.createImgbox();

        if(this.btns){
            this.createBtns();
            this.addBtnsEvent();
        }

        if(this.list){
            this.createList();
        }
    }

    createList() {
        this.listBox = createEle("list", this.box);
        let str = "";
        this.imgs.forEach((val,idx)=>{
            str += `<span>${idx}</span>`
        })
        this.listBox.innerHTML = str;
        this.listBox.children[this.index].className = "active";
    }

    createBtns() {
        this.btnsBox = createEle("btns", this.box);
        this.left = createEle("left", this.btnsBox);
        this.right = createEle("right", this.btnsBox);
        this.left.innerHTML = "&lt;";
        this.right.innerHTML = "&gt;";
    }

    createImgbox() {
        this.imgbox = createEle("imgbox", this.box);
        let str = "";
        this.imgs.forEach(val=>{
            str += `<a href="${val.href}"><img src="${val.src}" alt="${val.alt}" title="${val.title}"></a>`;
        })
        this.imgbox.innerHTML = str;
        this.imgbox.children[this.index].style.left = "0";
    }

    addBtnsEvent() {
        const that = this;
        this.left.onclick = function(){
            that.changeIndex(1);
        }
        this.right.onclick = function(){
            that.changeIndex(2);
        }
    }

    changeIndex(d) {
        if(d === 1){
            if(this.index === 0){
                this.index = this.imgs.length-1;
                this.prev = 0;
            }else{
                this.index--;
                this.prev = this.index+1;
            }
            this.move(this.prev, this.index);
        }else{
            if(this.index === this.imgs.length-1){
                this.index = 0;
                this.prev = this.imgs.length-1
            }else{
                this.index++;
                this.prev = this.index-1;
            }
            this.move(this.prev, this.index);
        }
    }

    move(prev, now) {
        const imgs = this.imgbox.children;
        imgs[prev].style.left = -imgs[0].offsetWidth + "px";
        imgs[now].style.left = 0;
        if(this.list){
            this.listBox.children[prev].className = "";
            this.listBox.children[now].className = "active";
        }
    }
}


function createEle(className, parent){
    const ele = document.createElement("div")
    ele.className = className;
    parent.appendChild(ele);
    return ele;
}


const box = document.querySelector(".banner");
const imgs = [{
    src:"./imgs/banner1.jpg",
    title:"广告1",
    href:"banner1",
    alt:"这是广告1"
},{
    src:"./imgs/banner2.jpg",
    title:"广告2",
    href:"banner2",
    alt:"这是广告2"
},{
    src:"./imgs/banner3.jpg",
    title:"广告3",
    href:"banner3",
    alt:"这是广告3"
},{
    src:"./imgs/banner4.jpg",
    title:"广告4",
    href:"banner4",
    alt:"这是广告4"
},{
    src:"./imgs/banner5.jpg",
    title:"广告5",
    href:"banner5",
    alt:"这是广告5"
},{
    src:"./imgs/banner6.jpg",
    title:"广告6",
    href:"banner6",
    alt:"这是广告6"
},{
    src:"./imgs/banner7.jpg",
    title:"广告7",
    href:"banner7",
    alt:"这是广告7"
}];

new Banner({
    box, imgs,
    // index: 5
    // btns: false,
    // list: true,
    // autoPlay: true,
    // delayTime: 3000,
});


